<!--suppress ALL -->
<template>
    <div class="page monitor-page" data-page="monitor">
        <div class="link-tab-page-top">
            <div class="link-tab-page-title" style="float:left;font-weight: bold;">监控</div>
            <div class="link-page-search">
                <div class="link-page-search-input" style="width: 65%;">
                    <i class="iconfont icon-APPicon_sousuo1"></i>
                    <input type="text" placeholder="搜一搜" id="vedioSearch">
                </div>
            </div>
            <a href="#" class="link" id="monitor-unit">
                <i id="mon-search" class="iconfont icon-APPicon_shaixuan1" style="font-size:22px;"></i>
            </a>
        </div>
        <div class="toolbar tabbar tabbar-scrollable" id="nine-tab-head">
            <div class="toolbar-inner" id="vedio-locationType"></div>
        </div>
        <div class="tabs">
            <div data-infinite-distance="50" class="page-content tab tab-active infinite-scroll-content ptr-content"
                @infinite="loadMore" id="mon-content" @ptr:refresh="refreshVedio">
                <div class="ptr-preloader" style="top: 30px;" id="nine-tab-preloader">
                    <div class="preloader color-multi"></div>
                    <div class="ptr-arrow"></div>
                </div>
                <div class="video-focus-list">
                    <div class="vedio-title" id="myFocusVedioTitle">我的关注</div>
                    <ul id="video-list"></ul>
                </div>
                <div class="list media-list no-hairline-bottom" id="video-focus-list">
                    <div class="vedio-title" id="otherVedioTitle">其他</div>
                    <ul id="video-list-other"></ul>
                </div>
                <div id="vedio_preloader" class="preloader infinite-scroll-preloader"></div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                vedioData: null, //当前需要置顶的列表项数据
                currentOrgId: 0,
                pageIndex: 0,
                pageSize: 25,
                isloadMore: true,
                name: '',
                vedioLocationType: '',
                moreUnitlist: [],
                positionType: "", //建筑物结构id
                selectOptionOrg: "",
            }
        },
        methods: {
            backToRefresh: function () {
                var self = this;
                self.moreUnitlist = [];
                $("#video-list").empty();
                self.getVedioList();
            },
            //加载更多
            loadMore: function () {
                let self = this;
                if (!self.isloadMore) return;
                self.isloadMore = false;
                setTimeout(function () {
                    self.pageIndex++;
                    self.getVedioList();
                    self.isloadMore = true;
                }, 800);
            },
            getVedioLocationType: function () {
                let self = this;
                let $ = self.$$;
                let $vedioEl = jQuery("#vedio-locationType");
                $vedioEl.empty();
                common.loading(1);
                Dao.getDict({
                    userName: userInfor.accountName,
                    code: 73,
                }, function (data) {
                    if (data.dictValueObj && data.dictValueObj.length > 0) {
                        let dicData = data.dictValueObj;
                        for (let i = 0; i < dicData.length; i++) {
                            if (dicData[i].dictKey == "0") {
                                dicData[i].dictKey = "";
                                dicData[i].dictValue = "全部";
                            }
                            $vedioEl.append(`<a href="#" class="tab-link monitor-tab" id="monitor-tab-` +
                                dicData[i].dictKey + `" data-id="` + dicData[i].dictKey + `"> 
                      ` + common.transNullundefined(dicData[i].dictValue) +
                                `</a>`);
                            $("#monitor-tab-").append('<div class="active"></div>').addClass(
                                "self-tab-avtive");
                        }
                    }

                    jQuery(".monitor-tab").off().click(function (event) {
                        if (getClickEnabel()) {
                            let dicKey = jQuery(event.currentTarget).attr("data-id");
                            self.positionType = dicKey;
                            self.moreUnitlist = [];
                            jQuery("#video-list").empty();
                            jQuery('#vedio_preloader').hide();
                            jQuery(".monitor-tab").find(".active").remove();
                            jQuery(".monitor-tab").removeClass("self-tab-avtive");
                            jQuery(event.currentTarget).append('<div class="active"></div>')
                                .addClass("self-tab-avtive");
                            jQuery(event.currentTarget)
                            self.pageIndex = 0;
                            self.getVedioList();
                        }
                    });
                    common.loading(0);
                }, null, false);
            },
            getVedioList: function () {
                let self = this;
                let $ = self.$$;
                common.loading(1);
                if (String(self.currentOrgId).split(',').length == 1) {
                    jQuery("#mon-search").addClass("select-active")
                } else {
                    jQuery("#mon-search").removeClass("select-active")
                }
                Dao.getVideoStatus({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds: self.currentOrgId,
                    pageIndex: self.pageIndex,
                    pageSize: self.pageSize,
                    name: self.name,
                    positionType: self.positionType,
                }, function (data) {
                    if (data && data.length > 0) {
                        if (data.length < self.pageSize) {
                            $('#vedio_preloader').hide();
                            self.isloadMore = false;
                        } else {
                            $('#vedio_preloader').show();
                            self.isloadMore = true;
                        }
                        for (let i = 0; i < data.length; i++) {
                            //是否置顶
                            if (data[i].stick) {
                                self.moreUnitlist.unshift(data[i]);
                            } else {
                                self.moreUnitlist.push(data[i]);
                            }
                        }
                    }
                    self.showUnitList();
                    common.loading(0);
                });
                if (self.pageIndex == 0) {
                    document.getElementById('mon-content').scrollTo({
                        top: 0,
                        behavior: "smooth"
                    })
                }
            },
            //显示视频列表
            showUnitList: function () {
                let self = this;
                let $ = self.$$;
                let data = self.moreUnitlist;
                let $el = $("#video-list");
                let isHasFocus = false;
                jQuery("#otherVedioTitle,#myFocusVedioTitle").hide();
                $el.empty();
                $("#video-list-other").empty();
                if (data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        let status = "";
                        let stick_name = "";
                        let stick_img = "";
                        //$("#otherVedioTitle").show();
                        //在线
                        if (data[i].isOnline && data[i].isOnline == 1) {
                            status = staticPath + "img/vedio/play.png"
                        } else {
                            // status = staticPath + "img/vedio/offline43.png"
                        }
                        //关注
                        if (data[i].isConcem && data[i].isConcem == 1) {
                            isHasFocus = true;
                            $el = $("#video-list");
                            $("#video-list").append(`
                    <li class="videoli" id=videoli` + common.transNullundefined(data[i].id) + `>
                        <div class="each-vedio-contain">
                            <div class="each-vedio-pic" style="position: relative;">
                                <div  id= status_offline_` + common.transNullundefined(data[i].id) + ` style="background-color:rgba(0, 0, 0, 0.5);position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:180px;">
                                    <p style="top:0;left:0;width:100%;height:100%;color:#ffffff;position:absolute;font-size: 12px;display: flex;justify-content: center;align-items: center;">视频离线</p>
                                </div>
                                <i class="iconfont icon-APPicon_guanzhu iconfont-focus" id="bt_` + data[i].id +
                                `" is-top="` + data[i].isConcem + `" style="font-size:24px"></i>
                                <img class="vedioImg" id=img_` + common.transNullundefined(data[i].id) + ` src=` +
                                picVedioNo(data[i].picUrl) + `
                                onerror="this.onerror=null; this.src='` + picVedioNo() + `'">
                                <div class="status_div" id= status_` + common.transNullundefined(data[i].id) + `>
                                    <img class="div_status" src=` + status + `>
                                </div>
                            </div>
                            <div class="each-vedio-name">
                                <div class="top">` + common.transNullundefined(data[i].organizationName) + `</div>
                                <div>` + common.transNullundefined(data[i].name) + `</div>
                            </div>
                        </div>
                    </li>`);
                        } else {
                            $("#video-list-other").append(`
                        <li class="videoli-other" id=videoli` + common.transNullundefined(data[i].id) + `>
                            <div class="each-vedio-contain-other">
                                <div class="each-vedio-pic">
                                    <img class="vedioImg" id=img_` + common.transNullundefined(data[i].id) + ` src=` +
                                picVedioNo(data[i].picUrl) + `
                                    onerror="this.onerror=null; this.src='` + picVedioNo() + `'">
                                    <div class="status_div" id= status_` + common.transNullundefined(data[i].id) + ` style="top:calc(50% - 25px);left:calc(50% - 25px);position:absolute">
                                        <img class="div_status" src=` + status + `>
                                    </div>
                                    <div class="status_div" id= status_offline_` + common.transNullundefined(data[i]
                                    .id) + ` style="top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);position:absolute">
                                        <p style="top:0;left:0;width:100%;height:100%;color:#ffffff;position:absolute;font-size: 12px;display: flex;justify-content: center;align-items: center;">视频离线</p>
                                    </div>
                                    <p class="video-type-name">` + common.transNullundefined(data[i]
                                    .organizationName) + `</p>
                                    <p class="video-name"><span>` + common.transNullundefined(data[i].name) + `</span></p>
                                </div>
                            </div>
                        </li>`
                            );
                        }
                        if (data[i].isOnline && data[i].isOnline == 1) {
                            // 在线
                            $('#status_' + data[i].id).show();
                            $('#status_offline_' + data[i].id).hide();
                        } else {
                            // 离线
                            $('#status_' + data[i].id).hide();
                            $('#status_offline_' + data[i].id).show();
                        }

                        if (isHasFocus) {
                            $("#myFocusVedioTitle").show();
                            $("#otherVedioTitle").show();
                        } else {
                            $("#myFocusVedioTitle").hide();
                            $("#otherVedioTitle").hide();
                        }
                        //视频播放
                        jQuery('#status_' + data[i].id).off().on("click", {
                            'data': data[i]
                        }, function (e) {
                            if (getClickEnabel(2000)) { //点击视频列表间隔
                                var bean = e.data.data;
                                playCurrentVedio(bean);
                            }
                        });
                        //关注
                        jQuery('#bt_' + data[i].id).off("click").on("click", {
                            'data': data[i]
                        }, function (e) {
                            self.isFocusVedio(e.data.data);
                        });
                    }
                } else {
                    if (self.pageIndex == 0) { //暂无数据
                        self.isloadMore = false;
                        $('#vedio_preloader').hide();
                        $("#video-list").append(`<div class="no-data-img"><img src="` + listNoDataPic() +
                            `"/></div>`);
                    }
                }
            },
            isFocusVedio: function (data) {
                let self = this;
                let $ = self.$$;
                self.vedioData = data;
                common.loading(1);
                if (self.vedioData.isConcem == 0) {
                    $("#myFocusVedioTitle").show();
                    $("#otherVedioTitle").show();
                    Dao.addUserConcem({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        concemId: self.vedioData.id,
                        type: 2,
                        userAccount: userInfor.accountName,
                    }, function (res) {
                        self.vedioData.isConcem = 1;
                        $("#videoli" + self.vedioData.id).remove();
                        var status = "";
                        if (self.vedioData.isOnline && self.vedioData.isOnline == 1) {
                            status = staticPath + "img/vedio/play.png"
                        } else {
                            status = staticPath + "img/vedio/line.png"
                        }
                        $("#video-list").append(`
                        <li class="videoli" id=videoli` + common.transNullundefined(self.vedioData.id) + `>
                            <div class="each-vedio-contain">
                                <div class="each-vedio-pic" style="position: relative;">
                                    <div  id= status_offline_` + common.transNullundefined(data.id) + ` style="background-color:rgba(0, 0, 0, 0.5);position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:180px;">
                                        <p style="top:0;left:0;width:100%;height:100%;color:#ffffff;position:absolute;font-size: 12px;display: flex;justify-content: center;align-items: center;">视频离线</p>
                                    </div>
                                    <i id="bt_` + self.vedioData.id + `" is-top="` + self.vedioData.isTop + `" class="iconfont icon-APPicon_guanzhu iconfont-focus" style="font-size:24px"></i>
                                    <img class="vedioImg" id=img_` + common.transNullundefined(self.vedioData.id) +
                            ` src=` + picVedioNo(self.vedioData.picUrl) + `
                                    onerror="this.onerror=null; this.src='` + picVedioNo() + `'">
                                    <div class="status_div" id= status_` + common.transNullundefined(self.vedioData
                                .id) + `>
                                        <img class="div_status" src=` + status + `>
                                    </div>
                                </div>
                                <div class="each-vedio-name">
                                    <div class="top">` + common.transNullundefined(self.vedioData.organizationName) + `</div>
                                    <div>` + common.transNullundefined(self.vedioData.name) + `</div>
                                </div>
                            </div>
                    </li>`);
                        if (data.isOnline && data.isOnline == 1) {
                            // 在线
                            $('#status_' + data.id).show();
                            $('#status_offline_' + data.id).hide();
                        } else {
                            // 离线
                            $('#status_' + data.id).hide();
                            $('#status_offline_' + data.id).show();
                        }
                        common.loading(0);
                        app.methods.showToastCenter('视频关注成功');
                        //关注
                        jQuery('#bt_' + self.vedioData.id).off("click").on("click", {
                            'data': self.vedioData
                        }, function (e) {
                            self.isFocusVedio(e.data.data);
                        });
                        //视频播放
                        jQuery('#status_' + self.vedioData.id).off().on("click", {
                            'data': self.vedioData
                        }, function (e) {
                            if (getClickEnabel(2000)) { //点击视频列表间隔
                                var bean = e.data.data;
                                playCurrentVedio(bean);
                            }
                        });
                    });
                } else {
                    //视频取消置顶
                    Dao.focusOnOff({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        concemId: self.vedioData.id,
                        type: 2,
                        userAccount: userInfor.accountName,
                    }, function (res) {
                        self.vedioData.isConcem = 0;
                        var status = "";
                        if (self.vedioData.isOnline && self.vedioData.isOnline == 1) {
                            status = staticPath + "img/vedio/play.png"
                        } else {
                            status = staticPath + "img/vedio/line.png"
                        }
                        // 关注按钮
                        // <div class="each-vedio-focus-other">
                        //  <a class="stick" href="#" id="bt_`+self.vedioData.id+`" is-top="`+self.vedioData.isConcem+`" style="color:#999;">
                        //      <i class="iconfont icon-APPicon_weiguanzhu iconfont-unfocus" style="font-size:24px"></i>
                        //  </a>
                        // </div>
                        $("#videoli" + self.vedioData.id).remove();
                        $("#video-list-other").append(`
                        <li class="videoli-other" id=videoli` + common.transNullundefined(self.vedioData.id) + `>
                            <div class="each-vedio-contain-other">
                                <div class="each-vedio-pic" style="position: relative;">
                                    <div  id= status_offline_` + common.transNullundefined(data.id) + ` style="background-color:rgba(0, 0, 0, 0.5);position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:180px;">
                                        <p style="top:0;left:0;width:100%;height:100%;color:#ffffff;position:absolute;font-size: 12px;display: flex;justify-content: center;align-items: center;">视频离线</p>
                                    </div>
                                    <img class="vedioImg" id=img_` + common.transNullundefined(self.vedioData.id) +
                            ` src=` + picVedioNo(self.vedioData.picUrl) + `
                                    onerror="this.onerror=null; this.src='` + picVedioNo() + `'">
                                    <div class="status_div" id= status_` + common.transNullundefined(self.vedioData
                                .id) + ` style="top:calc(50% - 25px);left:calc(50% - 25px);position:absolute">
                                        <img class="div_status" src=` + status + `>
                                    </div>
                                </div>
                            </div>
                            <div class="each-vedio-name1">
                                <div class="top">` + common.transNullundefined(self.vedioData.organizationName) + `</div>
                                <div>` + common.transNullundefined(self.vedioData.name) + `</div>
                            </div>
                        </li>`
                        );
                        if (data.isOnline && data.isOnline == 1) {
                            // 在线
                            $('#status_' + data.id).show();
                            $('#status_offline_' + data.id).hide();
                        } else {
                            // 离线
                            $('#status_' + data.id).hide();
                            $('#status_offline_' + data.id).show();
                        }
                        common.loading(0);
                        app.methods.showToastCenter('取消视频关注成功');
                        //关注
                        jQuery('#bt_' + self.vedioData.id).off("click").on("click", {
                            'data': self.vedioData
                        }, function (e) {
                            self.isFocusVedio(e.data.data);
                        });
                        //视频播放
                        jQuery('#status_' + self.vedioData.id).off().on("click", {
                            'data': self.vedioData
                        }, function (e) {
                            if (getClickEnabel(2000)) { //点击视频列表间隔
                                var bean = e.data.data;
                                playCurrentVedio(bean);
                            }
                        });
                        if (jQuery("#video-list").children().length == 0) {
                            jQuery("#myFocusVedioTitle").hide();
                            $("#otherVedioTitle").hide();
                        }
                    }, function (e) {
                        common.loading(0);
                        app.methods.showToastCenter('取消视频关注失败');
                    }, true);
                }
            },
            refreshVedio: function (e, done) {
                if (done && e) {
                    var self = this;
                    self.pageIndex = 0;
                    var $ = self.$$;
                    //   $('#nine-tab-preloader').css('top','120px');
                    //   $('#nine-tab-preloader').show();
                    if (1 === e) {
                        common.loading(1);
                    }
                    setTimeout(function () {
                        self.moreUnitlist = [];
                        $("#video-list").empty();
                        self.getVedioList();
                        done();
                        //   $('#nine-tab-preloader').css('top','30px');
                        //   $('#nine-tab-preloader').hide();
                        if (1 === e) {
                            common.loading(0);
                        }
                    }, 1000);
                }
            },
            //绑定联网单位筛选
            bindUnitChange: function () {
                var self = this;
                var app = self.$app;
                jQuery('#vedio_preloader').hide();
                loadSelectUnitFunc(function (data) {
                    //选中
                    if (self.selectOptionOrg != data.orgId) {
                        self.selectOptionOrg = data.orgId;
                        self.currentOrgId = data.orgId;
                    } else {
                        self.selectOptionOrg = "";
                        self.currentOrgId = userInfor.organizationIds;
                    }
                    self.pageIndex = 0;
                    self.moreUnitlist = [];
                    $("#video-list").empty();
                    self.clearContent();
                    self.getVedioList();
                }, self.selectOptionOrg);
            },
            clearContent: function () {
                if (this.selectOptionOrg != "") {
                    $("#mon-search").addClass('search-select');
                } else {
                    $("#mon-search").removeClass('search-select');
                }
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var app = self.$app;
                //支队用户默认选中
                if (userInfor.isMuilUnitUser == 0) {
                    self.currentOrgId = userInfor.org.id;
                    jQuery("#monitor-unit").hide();
                } else {
                    self.currentOrgId = userInfor.organizationIds;
                    //绑定联网单位筛选
                    jQuery("#monitor-unit").show().off().click(function () {
                        self.bindUnitChange();
                    });
                }
                self.pageIndex = 0;
                self.moreUnitlist = [];
                jQuery("#video-list").empty();
                //九小用户不用tab
                if (userInfor.role[0].id != 143) {
                    self.getVedioLocationType();
                } else {
                    $("#nine-tab-head").hide();
                    $(".video-focus-list").css("margin-top", "0");
                    $("#nine-tab-preloader").css("top", "10px");
                }

                window.refreshVedio_monitor = self.refreshVedio;

                //搜索
                jQuery("#vedioSearch").off().keypress(function (e) {
                    let name = jQuery("#vedioSearch").val();
                    if (e.which == 13) {
                        self.name = name;
                        self.moreUnitlist = [];
                        jQuery("#video-list").empty();
                        self.isloadMore = false;
                        self.pageIndex = 0;
                        self.getVedioList();
                    };
                });
                self.getVedioList();
            },
        }
    }
</script>

<style scoped>
    .video-type-name {
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
    }

    .video-name span {
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .videoli-other {
        margin-bottom: 45px;
    }

    .each-vedio-name1 {
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .each-vedio-name1 .top {
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
    }
</style>